<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test01</title>
    <script type="text/javascript" src="{{static_url('jquery-3.6.1.min.js')}}"></script>
    <script type="text/javascript" src="{{static_url('jquery-3.6.1.js')}}"></script>
    <script type="text/javascript">
        $(function () {
            var websocket = null;
            $("#btnOpenWebSocket").on('click', function () {
                $("#taMessage").val();
                websocket = new WebSocket("ws://127.0.0.1:8888/websocket/")
                webSocketProcess();
            });
            $("#btnCloseWebSocket").on('click', function () {
                websocket.close()
            });
            $("#btnPingWebSocket").on('click', function () {
                websocket.ping
            });
            $("#btnSendMessage").on('click', function () {
                var message = $("#iWriteMessage").val();
                websocket.send("ping")
            });

            function webSocketProcess() {
                websocket.onmessage = function (event) {
                    var message = $("#taMessage").val();
                    message += event.data + "\n";
                    $("#taMessage").val(message);
                };
            }
        })
    </script>
</head>
<body style="text-align: center">
<div style="width: 100%; height: 30px">
    <button id="btnOpenWebSocket">Open WebSocket</button>
    <button id="btnPingWebSocket">Ping WebSocket</button>
    <button id="btnCloseWebSocket">Close WebSocket</button>
</div>
<div style="width: 100%; height: 30px">
    <input id="iWriteMessage"/>
    <button id="btnSendMessage">Send Message</button>
</div>
<textarea id="taMessage" disabled="true"
          rows="10" cols="40">
</textarea>

</body>
</html>